//引入Vue
import Vue from 'vue'
//引入vue-router
import VueRouter from 'vue-router'
//要显示的页面组件
import Home from '../views/Home.vue'
// 使用vue-router
Vue.use(VueRouter)

//定义路由与页面组件的映射关系   url -> 组件/页面
const routes = [
  // 路由的重定向
  {
    // 原本要跳转的路径
    path: '/',
    // 重定向之后要价在的页面
    redirect: '/me',
  },
  // 普通的配置方法
  {
    //路由路径
    path: '/',
    //命名路由
    name: 'Home',
    // 页面组件
    component: Home
  },
  // 关于页面的路由
  {
    path: '/about',
    name: 'About',
    // 懒加载路由
    component: () => import('../views/About.vue')
  },
  // 用户界面的路由
  {
    // 用户界面的路径
    path: '/user/:userId',
    // 用户界面的命名路由
    name: 'User',
    // 用户界面的组件
    component: () => import('../views/User.vue')
  },
  // 我的页面
  {
    // 用户界面的路径
    path: '/me',
    // 用户界面的命名路由
    name: 'Me',
    // 用户界面的组件
    component: () => import('../views/Me.vue'),
    // 嵌套路由 子路由
    children: [
      // 个人信息
      {
        path: 'meInfo',
        name: 'MeInfo',
        component: () => import('../views/MeInfo.vue')
      },
      // 我的详情
      {
        path: 'meDetail',
        name: 'MeDetail',
        component: () => import('../views/MeDetail.vue')
      }
    ]
  },
]

// 创建路由实例对象
const router = new VueRouter({
  // 路由模式
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

// 导出路由
export default router

